<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <link rel="stylesheet" href="../../static/layui/css/layui.css" th:src="@{/static/layui/css/layui.css}" media="all">
    <link href="//hnres.etalk365.com/public/css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
    </style>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
      <legend style="font-size: 18px;color: #19a2e3;font-weight: bold">基本资料</legend>
    </fieldset>
    <form class="layui-form">
        <input type="hidden" id="personId" name="personId" th:value="${studentInfo.personId}">
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label"><i class="fa fa-asterisk fa-1" style="color: red;" aria-hidden="true"></i>学号</label>
              <div class="layui-input-inline">
                <input type="text" name="loginName" id="loginName" th:value="${studentInfo.loginName}" lay-verify="loginName" autocomplete="off" readonly class="layui-input" maxlength="20">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label"><i class="fa fa-asterisk fa-1" style="color: red;" aria-hidden="true"></i>中文名</label>
              <div class="layui-input-inline">
                <input type="text" name="cnName" th:value="${studentInfo.cnName}" lay-verify="cnName" autocomplete="off" class="layui-input" maxlength="20">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">英文名</label>
              <div class="layui-input-inline">
                <input type="text" name="enName" th:value="${studentInfo.enName}" autocomplete="off" class="layui-input" maxlength="20">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">推荐人</label>
              <div class="layui-input-inline">
                <input type="text" name="qrCode" th:readonly="${!(session.roleId==1 || session.roleId==12 || session.roleId==14 || (session.roleId==2 && studentInfo.personId==null))}"  th:value="${studentInfo.qrCode}"  autocomplete="off" class="layui-input" maxlength="20">
              </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-inline">
                <select name="sex"  lay-search="">
                  <option value="">请选择性别</option>
                  <option th:selected="${studentInfo.sex==1}"  value="1">男</option>
                  <option th:selected="${studentInfo.sex==2}" value="2">女</option>
                </select>
             </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">出生日期</label>
              <div class="layui-input-inline">
                <input type="text" id="birthday" name="birthday" th:value="${studentInfo.birthday}"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" maxlength="10">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label"><i class="fa fa-asterisk fa-1" style="color: red;" aria-hidden="true"></i>手机号码</label>
              <div class="layui-input-inline">
                 <input type="tel" name="phone" th:value="${studentInfo.phone}" lay-verify="required|phone" autocomplete="off" class="layui-input" maxlength="11">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label"><i class="fa fa-asterisk fa-1" style="color: red;" aria-hidden="true"></i>用户类型</label>
              <div class="layui-input-inline">
                <select name="testMark"  lay-search="">
                  <option value="">请选择用户类型</option>
                  <option th:selected="${studentInfo.testMark==0}" value="0">常规</option>
                  <option th:selected="${studentInfo.testMark==1}" value="1">测试</option>
                  <option th:selected="${studentInfo.testMark==2}" value="2">市场</option>
                  <option th:selected="${studentInfo.testMark==3}" value="3">员工</option>
                  <option th:selected="${studentInfo.testMark==4}" value="4">个人代理</option>
                  <option th:selected="${studentInfo.testMark==5}" value="5">学生代理</option>
                  <option th:selected="${studentInfo.testMark==6}" value="6">JP</option>
                  <option th:selected="${studentInfo.testMark==7}" value="7">市场组长</option>
                    <option th:selected="${studentInfo.testMark==8}" value="8">成长树代理</option>
                </select>
              </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
              <div class="layui-input-inline" style="z-index: 100;">
                 <input type="password" id="password" th:value="${studentInfo.password}"  placeholder="请输入密码" autocomplete="off" class="layui-input" maxlength="20">
                 <i id="lookup" style="position: absolute;left: 165px;top: 12px;cursor: pointer" class="fa fa-eye fa-lg" title="点击隐藏或显示密码" aria-hidden="true"></i>
              </div>
              <div class="layui-form-mid layui-word-aux">请填写6到20位密码</div>
            </div>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal" id="editPassword">修改密码</button>
                <button type="button" class="layui-btn layui-btn-primary" style="display: none" id="lastSix">手机后六位</button>
                <button type="button" class="layui-btn layui-btn-danger" style="display: none" id="subPassword">确认提交</button>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
          <legend style="font-size: 18px;color: #19a2e3;font-weight: bold">服务资料</legend>
        </fieldset>
        <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">约课顾问</label>
              <div class="layui-input-inline">
                <input type="tel"  readonly th:value="${studentInfo.bccLogin}" autocomplete="off" placeholder="暂无绑定" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">课程顾问</label>
              <div class="layui-input-inline">
                <input type="tel" readonly th:value="${studentInfo.ccLogin}" placeholder="暂无绑定" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">学习顾问</label>
                <div class="layui-input-inline">
                    <select name="sscId" lay-search="">
                        <option value="">请选择SSC</option>
                        <option th:each="list:${sscList}" th:value="${list.id}" th:text="${list.loginName}" th:selected="${studentInfo.sscId == list.id}">请选择SSC</option>
                    </select>
                </div>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
          <legend style="font-size: 18px;color: #19a2e3;font-weight: bold">详细资料</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">年级</label>
            <div class="layui-input-inline">
                <select name="gradeId" lay-search="">
                    <option value="">请选择年级</option>
                    <option th:each="list:${QGradeList}" th:value="${list.id}" th:text="${list.cnName}" th:selected="${studentInfo.gradeId == list.id}"></option>
                </select>
            </div>
            <label class="layui-form-label">上课店铺</label>
            <div class="layui-input-inline">
                <input type="hidden" th:value="${studentInfo.attendClassStores}">
                <select  name="attendClassStores" lay-search="">
                    <option value="">请选择上课店铺</option>
                    <option th:each="list:${storesList}" th:value="${list.id}" th:text="${list.name}" th:selected="${studentInfo.attendClassStores == list.id}"></option>
                </select>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">约课时间</label>
              <div class="layui-input-inline">
                <input  th:value="${#dates.format(studentInfo.releaseTime,'yyyy-MM-dd HH:mm:ss')}" type="text" name="classTime" id="classTime" placeholder="请选择约课时间" autocomplete="off" class="layui-input">
              </div>
            </div>
            <label class="layui-form-label">决策人</label>
            <div class="layui-input-inline">
                <select name="decisionMaker" lay-search="">
                    <option value="">--决策人--</option>
                    <option value="爸爸" th:selected="${'爸爸' == studentInfo.decisionMaker}">爸爸</option>
                    <option value="妈妈" th:selected="${'妈妈' == studentInfo.decisionMaker}">妈妈</option>
                    <option value="其他" th:selected="${'其他' == studentInfo.decisionMaker}">其他</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><i class="fa fa-asterisk fa-1" style="color: red;" aria-hidden="true"></i>客户渠道</label>
            <div class="layui-input-inline">
                <select name="channelId" lay-search="" lay-verify="channelId">
                  <option value="">请选择客户渠道</option>
                  <option th:each="list:${channeList}" th:value="${list.id}" th:text="${list.channelName}" th:selected="${list.id == studentInfo.channelId}"></option>
                </select>
            </div>
            <label class="layui-form-label">客户属性</label>
            <div class="layui-input-inline">
                <select  lay-search="" disabled>
                  <option th:if="${studentInfo.parentId!=9}" th:text="${studentInfo.revisitName}"></option>
                  <option th:if="${studentInfo.parentId==9}">正式客户</option>
                </select>
            </div>
            <label class="layui-form-label">活动名称</label>
            <div class="layui-input-inline">
                <select name="promotionId" lay-search="">
                  <option value="">请选择活动</option>
                  <option th:each="list:${listPromotion}" th:value="${list.id}" th:text="${list.name}" th:selected="${list.id == studentInfo.promotionId}"></option>
                </select>
            </div>
            <label class="layui-form-label">所属代理</label>
            <div class="layui-input-inline">
                <input type="hidden" th:value="${studentInfo.agentId}">
                <select name="agentId" lay-search="">
                  <option value="">请选择所属代理</option>agentsList
                  <option th:selected="(${list.id} == *{studentInfo.agentId})"  th:each="list:${agentsList}" th:value="${list.id}" th:text="${list.name}"></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div th:if="${session.roleId !=2 and session.roleId !=12}">
                <label class="layui-form-label">到店上课</label>
                <div class="layui-input-inline">
                    <select name="intention" lay-search="">
                      <option value="">请选择是否到店上课</option>
                      <option value="1" th:selected="${studentInfo.intention == 1}">是</option>
                      <option value="0" th:selected="${studentInfo.intention == 2}">否</option>
                    </select>
                </div>
            </div>
            <label class="layui-form-label">收集点</label>
            <div th:if="${studentInfo.storesType < 4}">
                <div class="layui-input-inline" th:if="${studentInfo.className ==  null or studentInfo.className==0}">
                    <input  readonly th:value="${studentInfo.remarks}" type="text" lay-verify="" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-input-inline" th:if="${studentInfo.className>0}">
                    <input type="hidden"  name="className" th:value="${studentInfo.className}">
                    <select lay-search="" disabled>
                        <option th:text="${studentInfo.schoolName}" selected></option>
                    </select>
                </div>
            </div>

            <div class="layui-input-inline" th:if="${studentInfo.storesType >= 4}">
                <input disabled th:value="${studentInfo.remarks}" type="text" lay-verify="" autocomplete="off" class="layui-input">
            </div>

            <label class="layui-form-label">联系QQ</label>
            <div class="layui-input-inline">
                <input type="text"  th:value="${studentInfo.qq}" name="qq" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">爱好</label>
            <div class="layui-input-inline">
                <input type="text" th:value="${studentInfo.hobby}" name="hobby" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所在省</label>
            <div class="layui-input-inline">
                <input type="hidden"  id="province" th:value="${studentInfo.provinceName}">
                <select name="provinceName" id="provinceName" lay-filter="province">
                    <option selected>请选择所在省</option>
                </select>
            </div>
            <label class="layui-form-label">所在市</label>
            <div class="layui-input-inline">
                <input type="hidden"  id="city" th:value="${studentInfo.cityName}">
                <select name="cityName" id="cityName"  lay-filter="city">
                    <option>请选择所在市</option>
                </select>
            </div>
            <label class="layui-form-label">所在县</label>
            <div class="layui-input-inline">
                 <input type="hidden"  id="county" th:value="${studentInfo.countyName}">
                <select name="countyName" id="countyName" lay-filter="area">
                    <option>请选择所在县</option>
                </select>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">详细地址</label>
              <div class="layui-input-inline">
                <input type="text" th:value="${studentInfo.address}" name="address" lay-verify="" autocomplete="off" class="layui-input">
              </div>
           </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属学校</label>
            <div class="layui-input-inline">
                <input type="text" th:value="${studentInfo.school}" name="school"  autocomplete="off" class="layui-input">
            </div>

            <label class="layui-form-label">注册时间</label>
            <div class="layui-input-inline">
                <input type="text" disabled th:value="${#dates.format(studentInfo.registerTime,'yyyy-MM-dd HH:mm:ss')}"  placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
            </div>

            <label class="layui-form-label">是否学龄前</label>
            <div class="layui-input-inline">
                <select name="preschool">
                    <option value="0">请选择是否学龄前</option>
                    <option value="1" th:selected="${studentInfo.preschool == 1}">是</option>
                    <option value="2" th:selected="${studentInfo.preschool == 2}">否</option>
                </select>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
          <legend style="font-size: 18px;color: #19a2e3;font-weight: bold">其他资料</legend>
        </fieldset>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">家庭情况</label>
            <div class="layui-input-block">
              <textarea name="familyInfo" th:text="${studentInfo.familyInfo}" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">学习困难</label>
            <div class="layui-input-block">
              <textarea name="learningDifficulty" th:text="${studentInfo.learningDifficulty}" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
              <textarea name="remark" th:text="${studentInfo.remark}" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn layui-btn-warm" lay-submit="" id="btnSave" lay-filter="demo1">保 存</button>
            </div>
        </div>
    </form>
    <script src="https://hkres.etalk365.com/public/lib/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="../../static/layui/layui.js" th:src="@{/static/layui/layui.js}" ></script>
    <script src="../../static/layui/layui.js" th:src="@{/static/layui/layui.all.js}" ></script>
    <script type="text/javascript" src="../../static/province_city/citys.js" th:src="@{/static/province_city/citys.js}"></script>
    <script>
       pca.init('select[name=provinceName]', 'select[name=cityName]', 'select[name=countyName]', $("#province").val(), $("#city").val(), $("#county").val());
    </script>
    <script>
        layui.use(['form', 'layedit', 'laydate'], function(){
          var form = layui.form
          ,layer = layui.layer
          ,layedit = layui.layedit
          ,laydate = layui.laydate;
          //日期
          laydate.render({
            elem: '#birthday'
          });
          laydate.render({
            elem: '#classTime',
            type: 'datetime'
          });
          // laydate.render({
          //   elem: '#registerTime'
          // });

          //创建一个编辑器
          var editIndex = layedit.build('LAY_demo_editor');

          //自定义验证规则
          form.verify({
            loginName: function(value){
                var reg=/^[a-zA-z]|\w{3,30}$/;
                if(value==""){
                    return '请输入登录名';
                }else if(value.length>20 || value.length<4){
                   return '您输入的登录名必须是4-20个字符';
                }else if (!reg.test(value)){
                   return "用户名只能是字母或数字";
                }
            },
            cnName : function(value){
                var regCn = /^[\u2E80-\u9FFF]+$/;
				if(value.length>16 || value.length<2){
					return "您输入的中文名称必须2-16个中文字";
				}

				if (!regCn.test(value)){
				     return "请输入中文名字";
				}
            },

            enName : function(value){
                if($("input[name='cnName']").val() =='' || $("input[name='enName']").val() == ''){
                     return "中文名称或英文名称不能都为空";
                }
                var reUser = /^[a-zA-z]$/;
                if(value.length>20){
                    return "您输入的英文名称不得超过20个英文字母";
                }
                if (!reUser.test(value)){
                    return "您输入的英文名称不得超过20个英文字母";
                }
            }
            // ,pass: [
            //   /^[\S]{6,12}$/
            //   ,'密码必须6到12位，且不能出现空格'
            // ]
            ,phone: function(value){
                //数字、字符下划线正则表达式
                let reg=/^1\d{10}$/;
                if(value.indexOf(" ")>-1){
                    return "手机号码不能有空格";
                }
                if (!reg.test(value)){
                    return "手机号码格式有误";
                }
            }
            ,channelId:function (value) {
                let testMark=$("#input[name='testMark']:checked").val();
                if (testMark!==1 && testMark!==2 && testMark!==3 && testMark!==7 && $.trim(value)===""){
                  return "请选择客户渠道";
                }
            }
          });

          //监听提交
          form.on('submit(demo1)', function(data){
            // * 发起请求
            $.ajax({
                data: JSON.stringify(data.field),
                type: "POST",
                dataType: "JSON",
                url: "/student/info/updateStuInfo",
                contentType:"application/json;charset=utf-8",
                beforeSend: function () {
                    // 禁用
                    $("#btnSave").addClass('layui-btn-disabled');
                },
                complete: function () {
                    // 启用
                    $("#btnSave").removeClass('layui-btn-disabled');
                },
                success: function (result) {
                    if (result.status > 0) {
                       layer.msg("修改成功",{icon: 1});
                    } else if(result.status == -1){
                        // 提示失败
                       layer.msg("该手机号已存在",{icon: 2});
                       $("input[name='phone']").focus();
                    }else{
                        layer.msg("修改失败",{icon: 2});
                    }
                }
            });
            // end ajax
            return false;
          });
        });

        //修改密码选项
        $("#editPassword").click(function(){
            $(this).hide();
            $(this).next().show();
            $(this).next().next().show();
        });

        //手机后六位密码填充
        $("#lastSix").click(function(){
           var phone = $("input[name='phone']").val();
           if(phone == ''){

           }
           var lastSix  = phone.substring(5,11);
           $("#password").val(lastSix);
        });

        $("#lookup").click(function(){
            if($(this).hasClass("fa-eye")){
                $(this).removeClass("fa fa-eye fa-lg").addClass("fa fa-eye-slash fa-lg");
                $(this).prev().attr("type","text");
            }else{
                $(this).removeClass("fa fa-eye-slash fa-lg").addClass("fa fa-eye fa-lg");
                $(this).prev().attr("type","password");
            }
        });

        $("#subPassword").click(function(){
            var reg = /^[\S]{6,12}$/;
            if(!reg.test($("#password").val())){

            }
            $(this).hide().prev().hide().prev().show();
            $.ajax({
                 type : "POST", //提交方式
                 url : "/student/info/updatePassword",//路径
                 data : {
                     "password" : $("#password").val(),
                      "personId" : $("#personId").val()
                 },
                 dataType:"json",
                 beforeSend: function () {
                    // 禁用
                    $("#subPassword").addClass('layui-btn-disabled');
                },
                complete: function () {
                    // 启用
                    $("#subPassword").removeClass('layui-btn-disabled');
                },
                 success: function (data) {
                    if(data.code == 1){
                        layer.msg('密码修改成功');
                    }else{
                        layer.msg("密码修改失败");
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            })
        });
        $(function () {
            setTimeout("$('#loginName').removeAttr('readonly')",1000);
        });
    </script>

</body>
</html>
